<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="../utils/js/news/react.development.js"></script>
    <script src="../utils/js/news/react-dom.development.js"></script>
    <script src="../utils/js/news/babel.min.js"></script>
    <script src="../utils/js/news/prop-types.js"></script>

    <script type="text/babel">
      class Add extends React.Component {
        // 1. 创建实例第一步调用
        constructor(props) {
          console.log("Add---constructor");
          super(props);
          this.state = { count: 0 };
        }
        sum = () => {
          const { count } = this.state;
          this.setState({ count: count + 1 });
        };

        force = () => {
          this.forceUpdate(); // 强制触发更新
        };

        remove = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("app"));
        };

        // 2. 将要被挂载
        UNSAFE_componentWillMount() {
          console.log("Add---componentWillMount");
        }

        // 3. 挂载一下
        render() {
          console.log("Add---render");
          const { count } = this.state;
          return (
            <div>
              <div>和是{count}</div>
              <button onClick={this.sum}>+1</button>
              <button onClick={this.remove}>卸载组件</button>
              <button onClick={this.force}>强制触发更新的钩子</button>
              <div>
                子组件验证componentRecieveProps
                <B count={count} />
              </div>
            </div>
          );
        }

        // 4. 挂载完毕
        componentDidMount() {
          console.log("Add---componentDidMount");
        }

        // 5. 组件将要卸载的钩子
        componentWillUnmount() {
          console.log("Add---componentWillUnmount");
        }

        shouldComponentUpdate() {
          console.log("Add---shouldComponentUpdate");
          return true;
        }

        // 组件将要更新 的钩子
        UNSAFE_componentWillUpdate() {
          console.log("Add---componentWillUpdate");
        }
        // 组件更新完毕 的钩子
        componentDidUpdate() {
          console.log("Add---componentDidUpdate");
        }
      }
      class B extends React.Component {
        render() {
          const { count } = this.props;
          return <h1>组件B内容{count}</h1>;
        }

        UNSAFE_componentWillReceiveProps() {
          console.log("b----");
        }
      }
      ReactDOM.render(<Add />, document.getElementById("app"));
    </script>
  </body>
</html>
